<template>
  <card ref="Card">
    <div slot="header">
      <el-input placeholder="订单号" v-model="search.number" style="width: 160px" clearable @keyup.enter.native="getData"/>
      <el-input placeholder="收件人姓名" v-model="search.receiverName" class="ml-5" style="width: 140px" clearable @keyup.enter.native="getData"/>
      <el-input placeholder="收件人联系电话" v-model="search.receiverPhone" class="ml-5" style="width: 140px" clearable @keyup.enter.native="getData"/>
      <date-time-picker class="ml-5" :start.sync="search.beginTime" :end.sync="search.endTime"/>
      <el-button type="success" @click="getData" class="ml-10">搜索</el-button>
      <el-button type="warning" @click="clearAll">清空</el-button>
    </div>
    <el-table :data="formData">
      <el-table-column prop="number" label="单号" width="150"/>
      <el-table-column prop="receiverName" label="收件人姓名"/>
      <el-table-column prop="receiverPhone" label="收件人电话"/>
      <el-table-column prop="currentName" label="收件网点"/>
      <el-table-column prop="articleName" label="物品"/>
      <el-table-column prop="detailNotes" label="备注"/>
      <el-table-column prop="createTime" label="创建日期">
        <template slot-scope="scope">
          <span>{{scope.row.createTime | formatDateTime}}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" width="100" fixed="right">
        <template slot-scope="scope">
          <el-button type="success" @click="check(scope.row)" class="el-icon-search">详情</el-button>
        </template>
      </el-table-column>
    </el-table>
    <pagination ref="Pagination" @update="getData"/>
    <online-detail ref="OrderDetail" :obj='obj'/>
  </card>
</template>

<script>
  import {pageMailApi} from '@/api/order/online'
  import {resetData} from "@/utils/common";
  import OnlineDetail from '../components/OnlineDetail'
  import DateTimePicker from '@/components/DateTimePicker/index'

  export default {
    name: 'Passed',
    components: {OnlineDetail, DateTimePicker},
    data() {
      return {
        formData: [],
        obj: {},
        state: 1, // 状态 (0未验货 1已验货)
        type: 2, // 寄件种类 (0国内寄件 1老挝-中国 2中国-老挝)
        search: {
          number: '',
          receiverName: '',
          receiverPhone: '',
          beginTime: '',
          endTime: ''
        }
      }
    },
    mounted() {
      this.getData();
    },
    methods: {
      check(obj) {
        this.obj = obj;
        this.$refs.OrderDetail.visible = true
      },
      getData() {
        let pagination = this.$refs.Pagination;
        let param = {
          current: pagination.current,
          size: pagination.size,
          number: this.search.number,
          receiverName: this.search.receiverName,
          receiverPhone: this.search.receiverPhone,
          beginTime: this.search.beginTime,
          endTime: this.search.endTime,
          state: this.state,
          type: this.type
        }
        if (!param.beginTime) delete param.beginTime;
        if (!param.endTime) delete param.endTime;
        this.$refs.Card.start()
        pageMailApi(param).then(result => {
          this.$refs.Card.stop()
          let response = result.resultParam.mailPage
          this.formData = response.records
          pagination.total = response.total;
        })
      },
      clearAll() {
        resetData(this, 'search')
        this.getData();
      }
    }
  }
</script>
